<template>
  <div>
    <div class="topBtn">
      <div class="sizeBig"><span>产品分拣</span></div>
      <div class="liucheng">
        <el-steps :active="4" align-center>
          <el-step title="生产开工"></el-step>
          <el-step title="打印输出"></el-step>
          <el-step title="输出分拣"></el-step>
          <el-step title="产品分拣"></el-step>
          <el-step title="包装发货"></el-step>
        </el-steps>
      </div>
      <div class="btn">
        <el-button icon="el-icon-delete" type="primary" @click="empty">清空格子</el-button>
      </div>
    </div>
    <div class="message">
      <p class="character">扫描外箱标签上的箱子条形码，系统按照设置好的分拣规则提示存放区域，作业员按照系统提示的储位号把产品放入即可。格子红色代表订单已满，请及时流向包装工位。<span
        class="skip">查看帮助文档</span></p>
    </div>
    <!-- 不会显示在界面的打印条码 -->
    <transition name="el-fade-in-linear">
      <div v-show="false">
        <form ref="form1" class="azure">
          <table border="1" style="border:solid 1px black;border-collapse:collapse;font-size:12px;text-align:center"
                 width="180">
            <tr>
              <td style="font-weight:800;width:60px">订单编码</td>
              <td>{{ gridOfPrint.NetOrderId }}</td>
            </tr>
            <tr>
              <td style="font-weight:800">客户名称</td>
              <td>{{ gridOfPrint.CtmName }}</td>
            </tr>
            <tr>
              <td style="font-weight:800;word-wrap: break-word;word-break: break-all ;">收货地址</td>
              <td>{{ gridOfPrint.RecAddress }}</td>
            </tr>
            <tr>
              <td style="font-weight:800;word-wrap: break-word;word-break: break-all ;">产 品 数</td>
              <td>{{ gridOfPrint.ProductNum }}</td>
            </tr>
            <tr v-for="(item,index) in gridOfPrint.OrderProducts" :key="index">
              <td style="font-weight:800;word-wrap: break-word;word-break: break-all ;">{{ item.ProductName }}</td>
              <td>{{ item.OrderProductCode }} —— {{ item.PhotoNum }}</td>
            </tr>
            <!-- <tr>
            <td style="font-weight:800;word-wrap: break-word;word-break: break-all ;">爱丽丝细绒</td>
            <td>OP0000000085 —— 25</td>
            </tr> -->
          </table>
        </form>
      </div>
    </transition>
    <div class="main">
      <div class="left">
        <div class="scanning">
          <h4>扫描操作区</h4>
          <div class="center">
            <el-radio-group v-model="radio" class="anniu">
              <el-radio label="0">连续扫描</el-radio>
              <el-radio label="1">首尾扫描</el-radio>
            </el-radio-group>

            <!--<el-button @click="testPrint">testPrint</el-button>-->

            <div class="saomiao">
              <span>请扫描SN条码：</span>
              <el-input v-model="saomiao" clearable placeholder="请扫描SN条码带出产品信息"
                        @keydown.native.enter="getProduct"></el-input>
            </div>
            <div class="next">
              <span>下一道工序：</span>
              <el-button class="fahuo" type="primary"><span @click="$router.push({name:'shipments'})">包装发货</span>
              </el-button>
            </div>
            <div class="sort">
              <h5>分拣储位：</h5>
              <span>{{ gridData.GridID }}</span>
            </div>
          </div>
        </div>
        <div class="inputcontent">
          <el-input v-model="search" class="inSearch" placeholder="请输入内容"></el-input>
          <div class="iconSearch"></div>
          <el-select v-model="lineId" placeholder="请选择线体" @change="getStation">
            <el-option
              v-for="(item,index) in lineData"
              :key="index"
              :label="item.LineId + '  ' + item.Name"
              :value="item.LineId"
            ></el-option>
          </el-select>
        </div>

        <div class="stationMes">
          <h4>工位信息展示</h4>
          <ul>
            <li>
              <h5>工位名称：</h5>
              <span>{{ workStationData.Name }}</span>
            </li>
            <li>
              <h5>工位线体：</h5>
              <span>{{ workStationData.LineName }}</span>
            </li>
            <li>
              <h5>所属车间：</h5>
              <span>{{ workStationData.WorkShopName }}</span>
            </li>
            <li>
              <h5>操作员：</h5>
              <span>{{ workStationData.LastModifyBy }}</span>
            </li>
          </ul>
        </div>


        <div v-for="(item,outerIndex) in gridAreaList" :key="outerIndex" class="grid">
          <el-card :body-style="{padding:'10px'}">
            <span class="express">{{ item.GridAreaName }}</span>
            <!-- max-height-300 -->
            <show-more-content
              :key="key"
              :fold-height="item.Grids ?  item.Grids.length<6 ? '160px':'310px' : '310px' ">
              <ul>

                <el-popover
                  v-for="(list,index) in item.Grids"
                  :key="index"
                  :disabled="list.FullStatus!==2 && list.FullStatus!==2 " trigger="hover"
                  @show="popperShow(list)">
                  <li slot="reference">

                    <div
                      v-if="list.FullStatus==2"
                      class="gezi"
                      style="background:#67C23A;color:#fff;cursor:pointer"
                      @click="orderDetail(index)"
                      @mouseenter="enter(index,outerIndex)"
                      @mouseleave="leave(index)">
                      <span class="gridname">{{ list.GridName }}</span>
                      <span class="code">订单编码：{{ list.NetOrderId }}</span>
                      <span class="code">客户名称：{{ list.CtmName }}</span>
                      <span class="code">产品数：{{ list.GridDetails.length }}/{{ list.ProductNum }}</span>

                    </div>
                    <div
                      v-else-if="list.FullStatus==1"
                      class="gezi"
                      style="backgroundColor:#0095FF;color:#fff"
                      @mouseenter="enter1(index,outerIndex)"
                      @mouseleave="leave(index)">
                      <span class="gridname">{{ list.GridName }}</span>
                      <span class="code">订单编码：{{ list.NetOrderId }}</span>
                      <span class="code">客户名称：{{ list.CtmName }}</span>
                      <span class="code">产品数：{{ list.GridDetails.length }}/{{ list.ProductNum }}</span>
                    </div>
                    <div
                      v-else
                      class="gezi"
                      style="backgroundColor:#fff;"
                    ><span class="gridname">{{ list.GridName }}</span></div>
                  </li>

                  <!--  popper content-->
                  <!-- v-show="seen && index===current-1 && outerCurrentIndex===outerIndex"-->
                  <div class="popover">
                    <h5 style="margin:20px 0 10px 20px;">订单编码：<span>{{ gridDetail.NetOrderId }}</span></h5>
                    <el-table :data="gridsData" border>
                      <el-table-column align="center" label="产品名称" prop="OrderProduct.Name"
                                       width="170"></el-table-column>
                      <el-table-column align="center" label="产品编码" prop="OrderProduct.OrderProductCode"
                                       width="150"></el-table-column>
                    </el-table>
                  </div>

                  <!--<div class="popover" v-show="seen1 && index===current-1 && outerCurrentIndex===outerIndex">-->
                  <!--<h5 style="margin:20px 0 10px 20px;">订单编码：<span>{{gridDetail.NetOrderId}}</span></h5>-->
                  <!--<el-table :data="gridsData" border>-->
                  <!--<el-table-column align="center" width="170" prop="OrderProduct.Name"-->
                  <!--label="产品名称"></el-table-column>-->
                  <!--<el-table-column align="center" width="150" prop="OrderProduct.OrderProductCode"-->
                  <!--label="产品编码"></el-table-column>-->
                  <!--</el-table>-->
                  <!--</div>-->

                </el-popover>

              </ul>
            </show-more-content>
          </el-card>
        </div>


      </div>
      <div class="right">
        <h4>异常SN</h4>
        <div>
          <Table2 :tableData2="tableData2"></Table2>
        </div>
        <h4>过站</h4>
        <div>
          <Table3 :tableData3="tableData3"></Table3>
        </div>
      </div>
    </div>

    <el-dialog :close-on-click-modal='false' :visible.sync="dialogVisible" center title="订单条码" width="450px">
      <div class="biaoge">
        <table class="biaotou">
          <tr>
            <td>订单编码</td>
          </tr>
          <tr>
            <td>客户名称</td>
          </tr>
          <tr>
            <td>收货地址</td>
          </tr>
          <tr>
            <td>产 品 数</td>
          </tr>
          <tr v-for="(item,index) in gridssData.OrderProducts" :key="index">
            <td style="width:100px">{{ item.ProductName }}</td>
          </tr>

        </table>
        <table class="neirong">
          <tr>
            <td>{{ gridssData.NetOrderId }}</td>
          </tr>
          <tr>
            <td>{{ gridssData.CtmName }}</td>
          </tr>
          <tr>
            <td>{{ gridssData.RecAddress }}</td>
          </tr>
          <tr>
            <td>{{ gridssData.ProductNum }}</td>
          </tr>
          <tr v-for="(item,index) in gridssData.OrderProducts" :key="index">
            <td style="width:100px">{{ item.OrderProductCode }} —— {{ item.PhotoNum }}</td>
          </tr>
        </table>
      </div>
      <div class="tiaoxingma">
        <barcode :options="barcode_option" :value="barcodeValue"></barcode>
      </div>
      <el-button class="anniu1" style="marginTop:20px" type="primary" @click="printPdf"><span class="dayin">打 印</span>
      </el-button>
    </el-dialog>
  </div>
</template>

<script>
import {getLodop} from './assets/LodopFuncs'
import {
  cleanGrid,
  getGridAreaList,
  getGridDetailByGridId,
  getGridDOfPrintInfoByGridId,
  getOrderBagOfFullBoard,
  scanGridProduct
} from '@/api/sorting'
import {getUserLineList} from '@/api/linebody'
import {getWorkStationInfo} from '@/api/scan'
import Table2 from './components/sortingTable2'
import Table3 from './components/sortingTable3'
import VueBarcode from 'vue-barcode'
import ShowMoreContent from '@/components/ShowMore'
import {printPdf} from '@/utils/commons'

const heightMap = {}

export default {
  name: 'sorting',
  components: {
    ShowMoreContent,
    // Table,
    Table2,
    'barcode': VueBarcode,
    Table3
  },
  data() {
    return {
      barcode_option: {
        displayValue: true,
        background: '#fff',
        fontSize: '24px'
      },

      seen: false,
      seen1: false,
      tableData2: [],
      tableData3: [],
      gridData: [],
      gridsData: [],
      gridsData1: [],
      gridssData: {},//打印详情
      codeArr: [], //条码数组
      // orderProductData:{},
      // gridList:[],
      gridAreaList: [], //格子区域列表
      key: -1, //格子区域列表
      gridDetail: [],  //格子详情

      gridOfPrint: {},//格子打印详情
      lineId: '',
      lineData: [],
      workStationData: [],
      radio: '0',
      saomiao: '',
      search: '',
      current: 0,
      outerCurrentIndex: -1,

      dialogVisible: false,
      barcodeValue: 0,

      showPopperFlag: ''
    }
  },
  mounted() {
    // this.init()
    this.getLine()
  },
  methods: {

    showMore(e, item) {
      const {GridAreaId} = item
      let el = e.target
      while (!el.className.includes('grid')) {
        el = el.parentNode
      }

      // const ele = el.querySelector('.expand-container')

      const $el = $(el.querySelector('.expand-container'))

      // window.azure = $el
      //   $el.addClass('ccc')

      $el.toggleClass('max-height-300')
      // if ($el.hasClass('expand-container')){
      //   console.log('has');
      //   $el.removeClass('expand-container')
      // } else{
      //   console.log('not has');
      //   $el.addClass('ccc')
      //   $el.addClass('expand-container')
      // }
      // console.log($el.attr());
      // $el.style()
      // if (GridAreaId in heightMap){
      //
      // } else{
      //   console.log($el.height());
      //   heightMap[GridAreaId] = $el.height()
      //
      // }

      // $el.animate({height:"300px"});
      // $(".btn1").click(function(){
      //   $("#box").animate({height:"300px"});
      // });

    },
    getStation() {
      //通过电脑IP地址获取当前工位信息
      getWorkStationInfo({
        // ipAddress: ipaddress,
        techType: 10,
        lineId: parseInt(this.lineId)
      }).then(res => {
        if (parseInt(res.Code) === 1) {
          this.workStationData = res.Result
          this.printer = res.Result.PrinterName
          this.init()
        }
      })
    },
    getLine() {
      getUserLineList({keyName: '', lineType: -1}).then(res => {
        if (parseInt(res.Code) === 1) {
          this.lineData = res.Result
        }
      })
    },
    printPdf() {
      if (this.lineId == '') {
        this.$message('请先选择线体再打印')

      } else {
        this.CreateOneFormPage()
        LODOP.PRINT()
        // LODOP.PREVIEW()
      }
    },

    testPrint() {
      console.log('333333333')
      const LODOP = getLodop()
      LODOP.SET_PRINT_PAGESIZE(2, '60mm', '90mm')
      LODOP.PRINT_INIT('订货单')
      LODOP.ADD_PRINT_RECT('1mm', '1mm', '60mm', '90mm', 0, 2)
      // LODOP.SET_PRINT_STYLE('FontSize', 12)
      // LODOP.SET_PRINT_STYLE('Bold', 1)
      LODOP.ADD_PRINT_TEXT(10, 20, 200, 20, '订单条码')
      // LODOP.ADD_PRINT_HTM(100, 0, 50, 400, this.$refs.form1.innerHTML)
      // LODOP.ADD_PRINT_BARCODE(35, 5, 180, 50, '128Auto', this.gridOfPrint.NetOrderId)

      // LODOP.SET_PRINTER_INDEX('OneNote')
      LODOP.SET_PRINTER_INDEX(this.printer)

      LODOP.PRINT()

    },
    CreateOneFormPage() {
      const LODOP = getLodop()
      LODOP.SET_PRINT_PAGESIZE(1, '60mm', '90mm')
      LODOP.PRINT_INIT('订货单')
      LODOP.SET_PRINT_STYLE('FontSize', 12)
      LODOP.SET_PRINT_STYLE('Bold', 1)
      LODOP.ADD_PRINT_TEXT(10, 20, 200, 20, '订单条码')
      LODOP.ADD_PRINT_HTM(100, 0, 50, 400, this.$refs.form1.innerHTML)
      LODOP.ADD_PRINT_BARCODE(35, 5, 180, 50, '128Auto', this.gridOfPrint.NetOrderId)
      LODOP.SET_PRINTER_INDEX(this.printer)
    },
    init() {
      // 获取区域格子列表
      // parseInt(this.lineId)
      getGridAreaList({
        shippingId: -1, keyName: this.search, status: -1
        , lineId: parseInt(this.lineId)
      }).then(res => {
        if (parseInt(res.Code) === 1) {
          this.gridAreaList = res.Result
          this.key++
        }
      })
      getOrderBagOfFullBoard().then(res => {
        if (parseInt(res.Code) === 1) {
          this.tableData3 = res.Result
        }
      })
    },

    azurePrintPdf(content, {PrinterName} = {}) {
      if (!content) {
        this.$message.warning('打印流为空🎁🎞♾')
      }
      const LODOP = getLodop()
      LODOP['SET_PRINT_PAGESIZE'](1, '60mm', '90mm')
      LODOP['ADD_PRINT_PDF']('2mm', 0, '100%', '100%', content)
      LODOP['SET_PRINTER_INDEX'](PrinterName)
      LODOP.PRINT()
    },

    // 扫描产品条码获取sn过站信息
    getProduct() {
      if (this.workStationData == '') {
        this.$message('请选择线体')
        this.saomiao = ''

      } else {
        if (this.radio === '0') {
          if (!this.saomiao) {
            this.$message('SN条码不能为空')
          } else {
            scanGridProduct({
              lineId: parseInt(this.lineId),
              scanFlag: 0,
              productCodeStart: this.saomiao,
              productCodeEnd: this.saomiao
            }).then(res => {

              const {Result} = res

              const print = () => {
                if (Result && Result.ReportList) {
                  Result.ReportList.filter(v => v).forEach(({Context, PrinterName}) => {
                    // console.log('ShippingNeedWeight => printPdf params => %o', Context, PrinterName)
                    printPdf(Context, PrinterName)
                  })
                }
              }

              if (Result.RePrintTicket) {
                this.$confirm('此操作将重新打印小票, 是否继续?', '提示', {
                  confirmButtonText: '确定打印',
                  cancelButtonText: '取消打印',
                  type: 'info'
                }).then(() => {
                  this.$message({
                    type: 'success',
                    message: '重打成功!'
                  });
                  print()
                })
              } else {
                print()
              }

              if (parseInt(res.Code) === 1) {
                this.$message({
                  type: 'success',
                  message: res.Message
                })

                this.$speakText('已过站')
                this.gridData = res.Result
                const {NeedTicket, ReportBytes} = res.Result
                // if (NeedTicket) {
                //   this.azurePrintPdf(ReportBytes, { PrinterName: this.printer })

                // }
              }
              this.saomiao = ''
              this.init()
              if (res.Result.FullStatus === 2) {
                getGridDOfPrintInfoByGridId({gridId: this.gridData.GridID}).then(res => {
                  if (parseInt(res.Code) === 1) {
                    this.gridOfPrint = res.Result
                    this.$nextTick(() => {
                      this.printPdf()
                    })
                  }
                })
              }
            }).catch(res => {
              this.tableData2.push({SN: this.saomiao, tips: res.Message})
              this.saomiao = ''
              this.$speakText('扫描失败'+res.message)
            })
          }
        } else {
          if (!this.saomiao) {
            this.$message('SN条码不能为空')

          } else {
            this.codeArr.push(this.saomiao + ' ')
            if (this.codeArr.length < 2) {
              this.$message('请扫描最后一个条码')
              this.saomiao = ''
            } else if (this.codeArr.length == 2) {
              scanGridProduct({
                scanFlag: 1,
                productCodeStart: this.codeArr[0],
                productCodeEnd: this.codeArr[1],
                lineId: parseInt(this.lineId)
              }).then(res => {

                const {Result} = res
                if (Result && Result.ReportList) {
                  Result.ReportList.filter(v => v).forEach(({Context, PrinterName}) => {
                    // console.log('ShippingNeedWeight => printPdf params => %o', Context, PrinterName)
                    printPdf(Context, PrinterName)
                  })
                }

                if (parseInt(res.Code) === 1) {
                  this.$message({
                    type: 'success',
                    message: res.Message
                  })
                  this.gridData = res.Result

                  const {NeedTicket, ReportBytes} = res.Result
                  // if (NeedTicket) {
                  // this.azurePrintPdf(ReportBytes, { PrinterName: this.printer })
                  // }

                }
                this.saomiao = ''
                this.codeArr = []
                this.init()
                if (res.Result.FullStatus === 2) {
                  getGridDOfPrintInfoByGridId({gridId: this.gridData.GridID}).then(res => {
                    if (parseInt(res.Code) === 1) {
                      this.gridOfPrint = res.Result
                      this.$nextTick(() => {
                        this.printPdf()
                      })
                    }
                  })
                }
              }).catch(res => {
                this.tableData2.push({SN: this.codeArr, tips: res.Message})
                this.saomiao = ''
                this.codeArr = []
                this.$speakText('扫描失败'+res.message)

              })
            } else {

            }
          }
        }
      }
    },
    //清空格子
    empty() {
      cleanGrid().then(res => {
        if (parseInt(res.Code) === 1) {
          this.$message({
            type: 'success',
            message: res.Message
          })
          this.init()
        }
      }).catch(res => {

      })
    },
    //点击清空
    qingkong(index) {
      this.$confirm('此操作将清空该格子, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.current = index + 1
        // cleanGrid({gridId:this.current}).then(res => {
        //     if(parseInt(res.Code) === 1){
        //         this.$message({
        //             type:'success',
        //             message:res.Message
        //         })
        //     }
        //     this.init()
        // }).catch(res =>{

        // })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消清空'
        })
      })

    },

    popperShow(list) {
      //  明显的bug...,先移入格子A,再移到格子B,但是B的数据先响应了,随后A把B给覆盖了,
      //  但是当前鼠标格子还是在B上,却显示了A的数据
      console.log('~~~~~~~~~~popperShow')
      this.showPopperFlag = list.FullStatus
      getGridDetailByGridId({gridId: this.current}).then(res => {
        if (parseInt(res.Code) === 1) {
          res.Result.forEach(el => {
            this.gridDetail = el.OrderBag
            // console.log(this.gridDetail)
          })
          this.gridsData = res.Result
          this.gridsData1 = this.gridsData[0]
        }
      })
    },
    // 鼠标移入格子 显示当前格子详情
    enter(index, outerIndex) {
      this.outerCurrentIndex = outerIndex
      this.current = index + 1
      this.seen = true
      getGridDetailByGridId({gridId: this.current}).then(res => {
        if (parseInt(res.Code) === 1) {
          res.Result.forEach(el => {
            this.gridDetail = el.OrderBag
            // console.log(this.gridDetail)
          })
          this.gridsData = res.Result
          this.gridsData1 = this.gridsData[0]
        }
      }).catch(res => {

      })
    },
    // 鼠标移入格子 显示当前格子详情
    enter1(index, outerIndex) {
      this.outerCurrentIndex = outerIndex
      this.current = index + 1
      this.seen1 = true
      getGridDetailByGridId({gridId: this.current}).then(res => {
        if (parseInt(res.Code) === 1) {
          res.Result.forEach(el => {
            this.gridDetail = el.OrderBag
            // console.log(this.gridDetail)
          })
          this.gridsData = res.Result
          this.gridsData1 = this.gridsData[0]
        }
      }).catch(res => {
      })
    },

    leave() {
      this.seen = false
      this.seen1 = false
    },
    orderDetail(index) {
      this.current = index + 1
      this.dialogVisible = true
      // this.barcodeValue = this.gridDetail.NetOrderId
      getGridDOfPrintInfoByGridId({gridId: this.current}).then(res => {
        if (parseInt(res.Code) === 1) {
          this.gridssData = res.Result
          this.gridOfPrint = res.Result
          this.barcodeValue = this.gridssData.NetOrderId
        }
      })
    },
    addclassStatus(i) {
      switch (i) {
        case 0:
          return 'statusTypeSkinA'  //空闲
        case 1:
          return 'statusTypeSkinB'  //使用中
        case 2:
          return 'statusTypeSkinC'  //满载
      }
    },
    print() {
      this._print()
    },
    _print() {
      const routeData = this.$router.resolve({
        name: 'printOrderCode',
        query: {
          barcodeValue: this.barcodeValue,

          netOrderId: this.gridDetail.NetOrderId,
          name: this.gridDetail.Name,
          recAddress: this.gridDetail.RecAddress,
          gridsDataLength: this.gridsData.length,
          gridsData: JSON.stringify(this.gridsData)
        }
      })
      window.open(routeData.href, '_blank')
    },
    handleStatus() {
      // console.log(this.Ids)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.topBtn {
  height: 60px;
  width: 98%;
  margin: 0 auto;
  line-height: 28px;
  display: flex;
  justify-content: space-between;

  .sizeBig {
    font-size: 16px;
    line-height: 60px;
    margin-left: 10px;
  }

  .liucheng {
    width: 600px;
    line-height: 28px;
  }

  .btn {
    line-height: 60px;
  }
}

.message {
  width: 98%;
  margin: 0 auto;
  height: 80px;
  line-height: 20px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(238, 238, 238, 1);
  font-size: 14px;

  .character {
    margin: 20px 0 21px 20px;
    color: #999999;

    .skip {
      color: #0095FF;
      margin-left: 10px;
      cursor: pointer;
    }
  }
}

.main {
  width: 98%;
  margin: 0 auto;
  margin-top: 20px;

  .left {
    float: left;
    width: 68%;

    .scanning {
      width: 100%;
      height: 104px;
      border: 1px solid #eee;

      h4 {
        font-size: 14px;
        font-weight: 600;
        padding: 17px 0 0 22px;
        height: 50px;
      }

      .center {
        width: 100%;
        // margin-left: 1.8%;
        .anniu {
          float: left;
          width: 6%;
          margin-left: 1.8%;

          .el-radio {
            margin-bottom: 5px;
          }
        }

        .saomiao {
          float: left;
          width: 40%;
          height: 40px;
          line-height: 40px;
          margin-left: 7%;

          span {
            width: 110px;
            font-size: 14px;
            float: left;
          }

          .el-input {
            float: left;
            width: 58%;
          }
        }

        .next {
          float: left;
          width: 24%;
          margin-left: 4%;
          height: 40px;
          line-height: 40px;

          span {
            width: 51%;
            font-size: 14px;
            font-weight: 400;
          }

          .el-button {
            width: 49%;

            span {
              margin-left: -5px;
            }
          }
        }

        .sort {
          float: right;
          width: 13%;
          margin-right: 1.8%;
          height: 40px;
          line-height: 40px;
          // border: 1px solid #eee;
          h5 {
            width: 73%;
            float: left;
            font-size: 14px;
            font-weight: 400;
          }

          span {
            width: 27%;
            color: #F1022F;
            font-size: 20px;
            font-weight: 600;
          }
        }
      }
    }

    .inputcontent {
      width: 100%;
      margin: 0 auto;
      height: 80px;
      position: relative;
      padding-top: 21px;
      box-sizing: border-box;

      .iconSearch {
        position: absolute;
        left: 277px;
        top: 30px;
        width: 20px;
        height: 20px;
        background-image: url('./image/搜索.png');
        background-repeat: no-repeat;
        cursor: pointer;
      }

      .inSearch {
        width: 308px;
        height: 40px;
      }
    }

    .stationMes {
      width: 100%;
      height: 90px;
      border: 1px solid #eee;

      h4 {
        font-size: 14px;
        margin: 17px 0 0 20px;
      }

      ul {
        transition: max-height .3s linear;
        margin-left: 20px;
        //@include clearfix;

        li {
          float: left;
          width: 23%;
          margin-top: 20px;
          margin-left: 10px;

          h5 {
            float: left;
            font-size: 14px;
            font-weight: 400;
          }

          span {
            float: left;
            font-size: 14px;
            font-weight: 400;
          }
        }
      }
    }

    .grid {
      width: 100%;
      /*margin: 0 auto;*/
      margin-top: 20px;
      /*margin-bottom: 60px;*/
      //@include clearfix;

      .max-height-300 {
        max-height: 300px;
      }

      .express {
        font-size: 16px;
        font-weight: 600;
        margin-left: 10px;
        margin-top: 10px;
      }

      ul {
        /*overflow-y: hidden;*/
        /*overflow-x: visible;*/

        width: 100%;
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;

        li {
          /*float: left;*/
          width: 193px;
          height: 150px;
          margin: 0 0 -1px -1px;
          position: relative;
          border: 1px solid #eee;
          z-index: 0;

          .popover {
            position: absolute;
            width: 340px;
            // height: 280px;
            top: -40px;
            left: 200px;
            border: 1px solid #ccc;
            border-radius: 2%;
            background-color: #fff;
            z-index: 55;
            // overflow: hidden;
            h5 {
              height: 30px;
            }

            .el-table {
              width: 95%;
              margin: 0 auto;
              margin-bottom: 20px;
            }

          }

          .gezi {
            width: 100%;
            height: 100%;
            border-radius: 5px;

            .gridname {
              display: inline-block;
              width: 100%;
              text-align: center;
              line-height: 50px;
            }

            .code {
              display: inline-block;
              font-size: 12px;
              width: 100%;
              height: 25px;
              margin-left: 5px;
            }
          }

        }

        li:hover {
          z-index: 1;
        }
      }
    }
  }

  .right {
    float: right;
    width: 31%;
    height: 809px;
    border: 1px solid #eee;

    h4 {
      font-size: 14px;
      font-weight: 600;
      padding: 17px 0 0 22px;
      height: 50px;
    }

    div {
      width: 92%;
      margin: 0 auto;
      border: 1px solid #eee;
      border-bottom: none;
    }
  }
}

.biaoge {
  width: 301px;
  //   height: 200px;
  margin: 0 auto;

  .biaotou {
    float: left;
    // height:200px;
    width: 100px;

    td {
      border: 2px solid #ccc;
      text-align: center;
      font-size: 15px;
      font-weight: 600;
      height: 40px;
    }

    // border: 1px solid #ccc;
  }

  .neirong {
    float: left;
    // height: 200px;
    width: 200px;

    td {
      text-align: center;
      border: 2px solid #ccc;
      border-left: none;
      font-size: 15px;
      height: 40px;
      //  font-weight: 600;
    }
  }
}

.tiaoxingma {
  margin-left: 70px;
  margin-top: 20px;
}

.anniu1 {
  margin-left: 140px;
  width: 150px;
}

.statusTypeSkinA {
  background-color: #fff;
}

.statusTypeSkinB {
  background-color: #0095FF;
  color: #fff;
}

.statusTypeSkinC {
  background-color: #F1022F;
  color: #fff;
}
</style>
